<template>
  <div class="container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="七星彩一号表" name="first">
        <table class="table" border="1">
          <tr>
            <td class="title">分析结果</td>
            <td class="content">
              <div class="content_title">
                <span>4.分析结果</span>
              </div>
              <div class="header_content">
                <ul>
                  <li v-for="(item,index) in list" :key="index">
                    <div>{{item}}</div>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td class="title">表格公式</td>
            <td class="content2">
              <el-table :data="dataList" style="width: 820px;height: 100%;" max-height="500" >
                <el-table-column label="5.表格公式" header-align="left">
                 <!-- <el-table-column prop="ticket" :label="item.name+' '+item.desc" v-if="item.name == '数值'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="m" :label="item.name+' '+item.desc" v-if="item.name == '和值'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column> -->

                  <el-table-column :prop="item.name=='数值'?'ticket'
                  :item.name=='奇偶值'?'jo'
                  :item.name=='转换成组合数'?'ticketSorted'
                  :item.name=='和值'?'m'
                  :item.name=='组合跨度值'?'m44'
                  :item.name=='奇偶和值'?'m45'
                  :'m'+index"
                  :label="item.name+' '+item.desc"  v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>

              <!--    <el-table-column prop="jo" :label="item.name+' '+item.desc" v-if="item.name == '奇偶值'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="ticketSorted" :label="item.name+' '+item.desc" v-if="item.name == '转换成组合数'"
                    v-for="(item,index) in headerList" :key='index' header-align="center" align="center" width="140"
                    :render-header="renderHeader">
                  </el-table-column> -->
                </el-table-column>
              </el-table>

            </td>
          </tr>
        </table>

        <!-- 底部按钮 -->
        <div class="bottom">
          <el-button type="primary" @click="goBack">上一步</el-button>
          <el-button type="primary" @click="goNext">下一步</el-button>
        </div>

      </el-tab-pane>
      <el-tab-pane label="七星彩二号表" name="second">

          <table class="table" border="1">
            <tr>
              <td class="title">分析结果</td>
              <td class="content">
                <div class="content_title">
                  <span>4.分析结果</span>
                </div>
                <div class="header_content">
                  <ul>
                    <li v-for="(item,index) in list" :key="index">
                      <div>{{item}}</div>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr>
              <td class="title">表格公式</td>
              <td class="content2">
                <el-table :data="dataList" style="width: 820px;height: 100%;" max-height="500" >
                  <el-table-column label="5.表格公式" header-align="left">
                    <!-- <el-table-column prop="ticket" label="数值" header-align="center"
                      width="80">
                    </el-table-column>
                    <el-table-column prop="ticketSorted" label="跨度值" header-align="center" align="center"
                      width="140">
                    </el-table-column>
                    <el-table-column prop="m" label="M" header-align="center" align="center"
                      width="60">
                    </el-table-column>
                    <el-table-column :prop="'m'+number" :label="'M'+ number" header-align="center" align="center"
                      width="60" v-for="number in 22" :key='number'>
                    </el-table-column>
                    <el-table-column :prop="'d'+number" :label="'D'+ number" header-align="center" align="center"
                      width="60" v-for="number in 8" :key='number'>
                    </el-table-column>
                    <el-table-column :prop="'f'+number" :label="'F'+ number" header-align="center" align="center"
                      width="60" v-for="number in 7" :key='number'>
                    </el-table-column>
                    <el-table-column prop="b" label="B" header-align="center" align="center"
                      width="60">
                    </el-table-column>
                    <el-table-column prop="jo" label="奇偶值" header-align="center" align="center"
                      width="120">
                    </el-table-column> -->

                    <el-table-column :prop="item.name=='数值'?'ticket'
                    :item.name=='奇偶值'?'jo'
                    :item.name=='转换成组合数'?'ticketSorted'
                    :item.name=='将D从小到大排列'?'e'
                    :item.name=='和值'?'m'
                    :item.name=='M21'?'m21'
                    :item.name=='M22'?'m22'
                    :item.name=='D1'?'d1'
                    :item.name=='D2'?'d2'
                    :item.name=='D3'?'d3'
                    :item.name=='D4'?'d4'
                    :item.name=='D5'?'d5'
                    :item.name=='D6'?'d6'
                    :item.name=='D7'?'d7'
                    :item.name=='D8'?'d8'
                    :item.name=='F1'?'f1'
                    :item.name=='F2'?'f2'
                    :item.name=='F3'?'f3'
                    :item.name=='F4'?'f4'
                    :item.name=='F5'?'f5'
                    :item.name=='F6'?'f6'
                    :item.name=='F7'?'f7'
                    :item.name=='奇偶和值'?'jos'
                    :'m'+index" :label="item.name+' '+item.desc"  v-for="(item,index) in headerList"
                      :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                    </el-table-column>
                  </el-table-column>
                </el-table>

              </td>
            </tr>
          </table>

          <!-- 底部按钮 -->
          <div class="bottom">
            <el-button type="primary" @click="goBack">上一步</el-button>
            <el-button type="primary" @click="goNext">下一步</el-button>
          </div>

      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
  export default {
    name: 'rankSevenFormula',
    data() {
      return {
        activeName: 'first',
        position: 'left',
        headerList: [],
        dataList: [], //表格公式数据
        list: [], // 分析结果数据
        form: {
          type: [],
        }
      };
    },
    created() {

      var activeName = this.$route.query.activeName;
      this.activeName = activeName;
      this.loadData();
    },

    methods: {
      handleClick(tab, event) {
        this.activeName = tab.name;
        this.dataList = [];
        this.headerList = [];
        this.loadData();
      },

      // 表格公式显示两行
     renderHeader(h, {
       column
     }) {
       let header = column.label.split(' ');
       return [h('p', [
         h('p', {}, header[0]),
         h('span', {}, header[1])
       ])];
     },

      loadData(){
        if (this.activeName == 'first') {
           var dataJson = window.localStorage.getItem("dwjoSevenList");
           this.list = eval(dataJson);
           this.getFormula(this.list)
        }else {
           var dataJson = window.localStorage.getItem("dwjoSevenList2");
           this.list = eval(dataJson);
           this.getFormulaTwo(this.list)
        }
      },


      //查询表格公式一
      async getFormula(list) {
        const res = await this.$http.post("/api/qixing/formula", {
          list: JSON.stringify(list)
        })
        console.log(res.data.data);
        if (res.data.code == 200) {
          this.headerList = res.data.data.header;
          this.dataList = res.data.data.data;
          window.localStorage.setItem("formulaSevenList", JSON.stringify(res.data.data));
        } else {
          this.$message.error(res.data.msg);
        }
      },

      //查询表格公式二
      async getFormulaTwo(list) {
        const res = await this.$http.post("/api/qixing/formulaTwo", {
          list: JSON.stringify(list)
        })
        console.log(res.data.data);
        if (res.data.code == 200) {
          this.headerList = res.data.data.header;
          this.dataList = res.data.data.data;
          for (var index in this.dataList) {
            var eArr = new Array;
            var item = this.dataList[index];
            eArr.push(item.eArr["0"])
            eArr.push(item.eArr["1"])
            eArr.push(item.eArr["2"])
            eArr.push(item.eArr["3"])
            eArr.push(item.eArr["4"])
            eArr.push(item.eArr["5"])
            eArr.push(item.eArr["6"])
            eArr.push(item.eArr["7"])
            var e=  eArr.join('')
            this.$set(item,'e',e)
             
            // 计算奇偶和值
            if (item.jo.length > 0) {
               var strArr = new Array;
              for (let i = 0; i < item.jo.length; i++) {
                 let str = item.jo.substr(i,1);
                 strArr.push(str);
              }
              let arr = strArr.map(Number)
              var jos = 0;
              for (let i = 0; i < arr.length; i++) {
              	jos+=arr[i];
              }
              this.$set(item,'jos',jos)
            }
          }
          window.localStorage.setItem("formulaSevenList2", JSON.stringify(res.data.data));
        } else {
          this.$message.error(res.data.msg);
        }
      },


      // 点击上一页
      goBack() {
        this.$router.back();
      },
      // 点击下一页
      goNext() {
        console.log(this.activeName)
        this.$router.push({
          path: '/home/rankSevenScreening',
          query:{activeName:this.activeName}
        })
      }
    }
  }
</script>

<style scoped="scoped">
  .container {
    height: 100%;
  }

  .table {
    width: 100%;
    height: 500px;
    border-color: #2676C2;
    border-collapse: collapse;
  }

  .title {
    width: 140px;
    color: #2676C2;
    text-align: center;
  }

  .content {
    height: 180px;
    margin: 0px;
    padding: 0px;
  }

  .content_title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
  }

  .header_content {
    /* width: 100%; */
    height: 130px;
    /* padding: 20px 10px; */
    display: inline-block;

  }

  ul {
    overflow: hidden;
    /* width: 100%; */
    /* margin-bottom: -10px; */
    margin-top: 0;
    /* background: red; */
  }

  li {
    list-style: none;
    float: left;
    width: 100px;
    /*可以用百分比*/
    height: 20px;
    /*可以用百分比*/
    margin-bottom: 10px;
    /* border: 1px solid red; */
  }

  li>div {
    background: #eee;
    margin: 0 10px;
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
    color: #2676C2;
    border: 1px solid #999999;

  }
</style>
